<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>{$c.CardName}</title>
<include file="./Public/tpl/wx/meta.html" />
<link href="{$AppCss}card.css" rel="stylesheet" type="text/css">
<style type="text/css">
.window {
width:267px;
position:absolute;
display:none;
margin:0px auto 0 -136px;
padding:2px;
top:0;
left:50%;
border-radius:0.6em;
-webkit-border-radius:0.6em;
-moz-border-radius:0.6em;
background-color: #f1f1f1;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
font:14px/1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;
z-index:9999;
bottom: auto;
}
.window .wtitle {
background-color: #585858;
line-height: 26px;
padding: 5px 5px 5px 10px;
color:#ffffff;
font-size:16px;
border-radius:0.5em 0.5em 0 0;
-webkit-border-radius:0.5em 0.5em 0 0;
-moz-border-radius:0.5em 0.5em 0 0;
}
.window .content {
/*min-height:100px;*/
overflow:auto;
padding:10px;
background: linear-gradient(#FBFBFB, #EEEEEE) repeat scroll 0 0 #FFF9DF;
color: #222222;
text-shadow: 0 1px 0 #FFFFFF;
border-radius: 0 0 0.6em 0.6em;
-webkit-border-radius: 0 0 0.6em 0.6em;
-moz-border-radius: 0 0 0.6em 0.6em;
}
.window #txt {
min-height:30px;
font-size:14px;
line-height:20px;
}
.window .content p {
margin:10px 0 0 0;
}
.window .txtbtn {
color: #666666;
font-weight: bold;
text-shadow: 0 1px 0 #FFFFFF;
display: block;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
text-align: windowcenter;
font-weight: bold;
font-size: 16px;
padding:8px;
margin:10px 0 0 0;
background-color:#F4F4F4;
border:1px solid #C6C6C6;
background-image: linear-gradient(bottom, #E1E1E1 0%, #ffffff 100%);
background-image: -o-linear-gradient(bottom, #E1E1E1 0%, #ffffff 100%);
background-image: -moz-linear-gradient(bottom, #E1E1E1 0%, #ffffff 100%);
background-image: -webkit-linear-gradient(bottom, #E1E1E1 0%, #ffffff 100%);
background-image: -ms-linear-gradient(bottom, #E1E1E1 0%, #ffffff 100%);
background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0, #E1E1E1),  color-stop(1, #ffffff)  );
-webkit-box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 0 #EEEEEE;
-moz-box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 0 #EEEEEE;
box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 0 #EEEEEE;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.window .txtbtn:visited {
background-image: linear-gradient(bottom, #ffffff 0%, #E1E1E1 100%);
background-image: -o-linear-gradient(bottom, #ffffff 0%, #E1E1E1 100%);
background-image: -moz-linear-gradient(bottom, #ffffff 0%, #E1E1E1 100%);
background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #E1E1E1 100%);
background-image: -ms-linear-gradient(bottom, #ffffff 0%, #E1E1E1 100%);
background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0, #ffffff),  color-stop(1, #E1E1E1)  );
}
.window .txtbtn:active {
background-image: linear-gradient(bottom, #ffffff 0%, #E1E1E1 100%);
background-image: -o-linear-gradient(bottom, #ffffff 0%, #E1E1E1 100%);
background-image: -moz-linear-gradient(bottom, #ffffff 0%, #E1E1E1 100%);
background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #E1E1E1 100%);
background-image: -ms-linear-gradient(bottom, #ffffff 0%, #E1E1E1 100%);
background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0, #ffffff),  color-stop(1, #E1E1E1)  );
}
.window .wtitle .close {
float:right;
background-image: url("");
width:26px;
height:26px;
display:block;
}
#overlay {
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000000;
opacity:0.5;
filter:alpha(opacity=0);
display:none;
z-index: 999;
}
.cardicon{ position:absolute; top:5px; left:5px; z-index:99 }
</style>
<script src="{$AppJs}jquery.js" type="text/javascript"></script>
</head>
<body id="card" class="mode_webapp">
<div class="menu_header"> 
     <div class="menu_topbar">
      <strong class="head-title">会员卡首页</strong>
      <span class="head_btn_left"><a href="javascript:history.go(-1);"><span>返回</span></a><b></b></span>
      <a class="head_btn_right" href="{:HomeUrl()}">
      	<span><i class="menu_header_home"></i></span><b></b>
      </a>
     </div>
</div>
<div id="overlay"></div>

<div class="cardcenter">
<eq name="c.HasCard" value="0">
    <div class="msk">
    	<p class="explain2"><a id="showcard" class="receive" href="javascript:void(0)">领取您的新会员卡</a><span>{$c.CardTip}</span></p>
    </div>
    <div class="card">
    	<img class="cardbg" src="{$c.CardBackground}" /><h1 style="color:{$c.CardNameColor}">{$c.CardName}</h1>
        <img class="cardicon" src="{$c.CardIcon}" />
    	<strong class="pdo verify" style="color:{$c.CardNumberColor}"><span id="cdnb"><em>会员卡号</em>{$c.CardNumber}</span></strong>
    </div>
    <p class="explain"><span>使用时向服务员出示此卡</span></p>
    <div class="window" id="windowcenter">
    <div id="title" class="wtitle">领卡信息<span class="close" id="alertclose"></span></div>
    <div class="content">
        <div id="txt"></div>
        <p><input name="truename" value="" class="px" id="truename" placeholder="请输入您的姓名" type="text"></p>
        <p><input name="tel" class="px" id="tel" value="" placeholder="请输入您的电话" type="number"></p>
        <input value="确 定" name="确 定" class="txtbtn" id="windowclosebutton" type="button">
    </div>
    </div>
<else/>
    <div class="card">
    	<img class="cardbg" src="{$c.CardBackground}" /><h1 style="color:{$c.CardNameColor}">{$c.CardName}</h1>
    	<img class="cardicon" src="{$c.CardIcon}" />
        <strong class="pdo verify" style="color:{$c.CardNumberColor}"><span id="cdnb"><em>会员卡号</em>{$c.CardNumber}</span></strong>
    </div>
    <p class="explain">
    <eq name="c.IsLock" value="0">
   		<span>使用时请出示此卡！&nbsp;&nbsp;余额：<b style="color:red">￥{$c.UnUsedMoney}</b></span>
    <else/>
    	<span style="font-weight:bold;color:red">您的会员卡已经被冻结</span>
    </eq>
    </p>
</eq>
</div>


<div class="cardexplain">
    <eq name="c.HasCard" value="1">
            <ul class="round" id="powerandgift" >
            <li>
            <a href="{:WxCardScoreUrl()}"><span>签到赚积分
                <eq name="c.HasCheckin" value="0"><em class="error">今日未签到</em></eq>
            </span>
            </a>
            </li>
            <li><a href="{:WxCardMemberUrl()}"><span>个人资料</span></a></li>
            <li><a href="{:WxCardMyConsumeUrl()}"><span>我的消费记录</span></a></li>
            <li><a href="{:WxCardMyScoreUrl()}"><span>我的积分记录</span></a></li>
            <li><a href="{:WxCardMyExchangeUrl()}"><span>我的礼品兑换记录</span></a></li>
            <li><a href="{:WxCardNotifyUrl()}"><span>通知管理</span></a></li>
            </ul>
        <eq name="c.IsLock" value="0">
            <notempty name="c.Link">
                <ul class="round">
                    <volist name="c.Link" id="lk">
                         <li><a href="{$lk.LinkUrl}"><span>{$lk.LinkName}</span></a></li>
                    </volist>
                </ul>
            </notempty>
        </eq>
    </eq>
    
    <ul class="round">
        <li><a href="{:WxCardInfoUrl()}"><span>会员卡说明</span></a></li>
        <li><a href="{:WxCardStoreUrl()}"><span>适用门店电话及地址</span></a></li>
    </ul>
    

    
     <ul class="round">
          <li class="addr"><a href="#"><span>地址: {$c.MerchantAddress}</span></a></li>
          <li class="tel"><a href="tel:{$c.MerchantTelephone}"><span>电话: {$c.MerchantTelephone}</span></a></li>
     </ul>
</div>

<script type="text/javascript"> 
$(document).ready(function () { 
	$("#windowclosebutton").bind("click",function() {
		var btn = $(this);
		var truename = $("#truename").val();
		if (truename.length<2||truename=='请输入名字') {
			 $("#truename").val("请输入名字");
			return;
		}
		
		var tel = $("#tel").val();
		var regu =/^[0-9]{7,11}$/;
		var re = new RegExp(regu);
		if(!re.test(tel)){
			 $("#tel").val("请输入正确的手机号码!");
			return  ;
		}
 
		var submitData = {
			username:truename,
			mobile: tel,
		};
	
	$.post('{$Url}getCard', submitData, function(data) {
		if (data.status == 1) {
			window.location.href=location.href;
			//alert(data.msg);
			/*	$("#windowcenter").slideUp(500);
			$("#overlay").css("display","none");
			$("#cdnb").html(data.msg);
			 $("#notice").css("display","");
			 $("#powerandgift").css("display","");
			settimeout($(".msk").fadeOut(1000),1000);
			return*/
		} else {}
		}, "json");
	});

	$("#showcard").click(function () { 
			alert("填写真实的姓名以及电话号码，即可获得会员卡，享受会员特权。"); 
			$("#overlay").css("display","block");
	});
 
}); 

 
	$("#alertclose").click(function () {
		$("#windowcenter").slideUp(500);
		$("#overlay").css("display","none");
	}); 
	
	function alert(title){ 
		$("#windowcenter").slideToggle("slow"); 
		$("#txt").html(title);
	} 
</script>
<include file="./Public/tpl/wx/cardfooter.html" />
</body>
</html>